<template>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- 内容区 -->
      <el-card class="box-card">
          
          <!-- 权限列表表格 -->
           <!-- 用户列表-表格 -->
        <el-table :data="roleTableData" stripe style="width: 100%">
          <!-- 表格展开列 -->
          <el-table-column type="expand" width="50">
            <template v-slot="scope">{{ scope.row }}</template>
          </el-table-column>
          <!-- 表格索引列 -->
          <el-table-column type="index" width="50">
          </el-table-column>
          <el-table-column prop="id" label="id" width="180">
          </el-table-column>
          <el-table-column prop="roleName" label="角色名" width="180">
          </el-table-column>
          <el-table-column prop="roleDesc" label="角色描述">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <!-- 作用域插槽获取当前数据的id -->
            <template>
            <!-- <template v-slot="{ row }"> -->
              <el-tooltip effect="dark" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
              </el-tooltip>
  
              <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                <el-button type="danger" icon="el-icon-delete" circle ></el-button>
              </el-tooltip>
  
              <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                <el-button type="warning" icon="el-icon-setting" circle></el-button>
              </el-tooltip>
            </template>
  
          </el-table-column>
        </el-table>
  
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name:'RightsView',
    data:function(){
      return {
          //   角色数据
          roleTableData:[]
      }
    },
    methods:{
      // 获取所有角色数据
      async getRoleList(){
        const {data,meta:{status}} = await this.$http.get('roles')
        console.log(data,status)
        if(status!==200){
          return this.$message.error('获取角色信息失败，请稍后再试!')
        }
        // 将获取到的角色数据处理之后赋值给roleList
        this.roleTableData = data
      },
    },
    mounted(){
      this.getRoleList()
    }
  }
  </script>
  
  <style>
  
  </style>